<template>
  <div class="personManage">
    <div class="header">
      <div class="headerBox">
        <i class="iconfont icon-essential-information"></i>
        <span>个人信息</span>
      </div>
    </div>
    <div class="routeritem">
      <router-link
        v-for="(routeritem, index) in routerlist"
        :key="index"
        :to="routeritem.path"
        >{{ routeritem.name }}</router-link
      >
    </div>
    <div class="bottom">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import baseData from "../component/baseData.vue";
import changeImage from "../component/changeImage.vue";
import passwordManage from "../component/passwordManage.vue";
import Footer from "@/components/footer.vue";
import { mapState } from "vuex";
export default {
  components: {
    Footer,
    baseData,
    changeImage,
    passwordManage,
  },
  data() {
    return {
      routerlist: [],
      Userrouterlist: [
        {
          name: "基本资料",
          path: "/Person/personManage/baseData",
        },
        {
          name: "修改头像",
          path: "/Person/personManage/changeImage",
        },
        {
          name: "密码管理",
          path: "/Person/personManage/passwordManage",
        },
      ],
      Adminrouterlist: [
        {
          name: "基本资料",
          path: "/AdminPerson/baseData",
        },
        {
          name: "修改头像",
          path: "/AdminPerson/changeImage",
        },
        {
          name: "密码管理",
          path: "/AdminPerson/passwordManage",
        },
      ],
      SuperAdminrouterlist: [
        {
          name: "基本资料",
          path: "/SuperAdminPerson/baseData",
        },
        {
          name: "修改头像",
          path: "/SuperAdminPerson/changeImage",
        },
        {
          name: "密码管理",
          path: "/SuperAdminPerson/passwordManage",
        },
      ],
    };
  },
  computed: {
    ...mapState("login", ["role"]),
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.role == "user") this.routerlist = this.Userrouterlist;
      else if (this.role == "admin") this.routerlist = this.Adminrouterlist;
      else if (this.role == "superAdmin") this.routerlist = this.SuperAdminrouterlist;
      
    },
  },
};
</script>

<style scoped>
.personManage {
  min-height: 100vh;
  background: #e5e2e2;
}
.header {
  display: flex;
  width: 90%;
  height: 200px;
  border-radius: 5px;
  background: #f7f8f8;
  margin: 50px auto 0px;
}
.headerBox {
  flex: 1;
  width: 90%;
  height: 100px;
  line-height: 100px;
  margin-top: 80px;
  padding-left: 100px;
}
.iconfont {
  font-size: 40px;
  color: #4b6457;
  vertical-align: middle;
  margin-right: 10px;
}
.headerBox span {
  font-size: 20px;
  color: #304038;
}
.routeritem {
  display: flex;
  height: 50px;
  width: 90%;
  justify-content: center;
  background: #f7f8f8;
  margin: 0px auto;
}
a {
  color: #384a41;
  line-height: 50px;
  display: block;
  width: 250px;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
}
.router-link-active {
  position: relative;
  /* color:#fff;
  background:rgb(52, 99, 94); */
  display: block;
  border: 0;
  border-bottom: 3px solid #384a41;
}
.bottom {
  display: flex;
  width: 90%;
  background: #f7f8f8;
  margin: 10px auto 0px;
}
</style>